<template>
  <div class="inventory-page">
    <!-- 筛选区 -->
    <el-form :inline="true" :model="page" class="search-form">
      <el-form-item label="盘点单号">
        <el-input v-model="page.InventoryCode" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="盘点结果">
        <el-input v-model="page.ResultId" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="盘点类型">
        <el-select v-model="page.ITypeId" placeholder="请选择" clearable>
          <el-option label="存货盘点" value="存货盘点" />
        </el-select>
      </el-form-item>
      <el-form-item label="仓库名称">
        <el-select v-model="page.DepotId" placeholder="请选择" clearable>
          <el-option label="货品仓库一" value="货品仓库一" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="getDate">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮区 -->
    <!-- <div class="action-buttons" style="margin: 10px 0;">
      <el-button type="primary" @click="onAdd">新增</el-button>
      <el-button @click="onDelete" :disabled="!selectedRows.length">删除</el-button>
      <el-button @click="onExport">导出</el-button>
      <el-button>作废</el-button>
      <el-button>锁定仓库</el-button>
      <el-button @click="fetchData">刷新</el-button>
    </div> -->

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%" @selection-change="onSelectionChange">
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="inventoryCode" label="盘点单号" width="120" />
      <el-table-column prop="resultName" label="盘点结果" width="100" />
      <el-table-column prop="depotName" label="仓库名称" width="120" />
      <el-table-column prop="iTypeName" label="盘点类型" width="120" />
      <el-table-column prop="iStartTime" label="盘点开始时间" width="120">
        <template #default="scope">
          {{ moment(scope.row.iStartTime).format("YYYY-MM-DD") }}
        </template>

      </el-table-column>
      <el-table-column prop="iEndTime" label="盘点结束时间" width="120">
        <template #default="scope">
          {{ moment(scope.row.iEndTime).format("YYYY-MM-DD") }}
        </template>
      </el-table-column>
      <el-table-column prop="dispatchState" label="出库状态" width="100">
        <template #default="scope">
          <el-inp v-if="scope.row.dispatchState == 0">未出库</el-inp>
          <el-inp v-if="scope.row.dispatchState == 1">部分出库</el-inp>
          <el-inp v-if="scope.row.dispatchState == 2">全部出库</el-inp>
        </template>
      </el-table-column>
      <el-table-column prop="receiveState" label="入库状态" width="100">
        <template #default="scope">
          <el-inp v-if="scope.row.dispatchState == 0">未入库</el-inp>
          <el-inp v-if="scope.row.dispatchState == 1">部分入库</el-inp>
          <el-inp v-if="scope.row.dispatchState == 2">全部入库</el-inp>
        </template>
      </el-table-column>
      <el-table-column prop="inventoryHandler" label="经办人" width="180" />
      <el-table-column prop="inventoryRemark" label="备注" width="100">
        <template #default="scope">
          <el-inp v-if="scope.row.inventoryRemark == 'string'"> </el-inp>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <!-- <el-button type="text" size="small" @click="onEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="onDelete([scope.row])">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <table>
      <td>
        <el-pagination v-model:current-page="page.index" v-model:page-size="page.size" :page-sizes="[15, 20, 30, 40]"
          :background="true" layout="slot, sizes" :total="page.totalCount" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
          共{{ page.totalPCount }} 条 共{{ page.index }}/{{ page.totalPCount }}页
        </el-pagination>
      </td>
      <td>
        <el-pagination v-model:current-page="page.index" v-model:page-size="page.size" :page-sizes="[15, 20, 30, 40]"
          :background="true" layout="slot, prev, pager, next" :total="page.totalCount" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
        <el-button type="primary" @click="handleCurrentChange(1)" :disabled="page.index==1">首页</el-button>
        </el-pagination>
      </td>
      <td>
        <el-pagination v-model:current-page="page.index" v-model:page-size="page.size" :page-sizes="[15, 20, 30, 40]"
          :background="true" layout="slot, jumper" :total="page.totalCount" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
        <el-button type="primary" @click="handleCurrentChange(page.totalPCount)" :disabled="page.index==page.totalPCount">尾页</el-button>
        </el-pagination>
      </td>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import moment from 'moment';
import { http } from '@/axios/axiosHelpers';
onMounted(() => {
  getDate();
})

const tableData = ref([])
const page = ref({
  index: 1,
  size: 15,
  InventoryCode: '',
  ResultId: '',
  DepotId: '',
  ITypeId: '',
  totalCount: 0,
  totalPCount: 0
})
const getDate = () => {
  http.get("basicread/api/Inventorys/GetInventorys", { params: page.value }).then(res => {
    tableData.value = res.data.data
    page.value.totalCount = res.data.totalCount
    page.value.totalPCount = res.data.totalPCount
  })
}
const selectedRows = ref([])
function onSelectionChange(val: any) {
  selectedRows.value = val
}


const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const resetForm = () => {

}
</script>

<style scoped>
.inventory-page {
  padding: 20px;
  background: #fff;
}

.search-form {
  margin-bottom: 10px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>